<template>
    <section>
        <!--工具条-->
        <el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
            <el-form :inline="true" :model="filters">
                <el-form-item>
                    <el-input size="small" style="width:200px;" v-model.trim="filters.businessNo" placeholder="请输入业务单号"></el-input>
                </el-form-item>
                <!-- <el-form-item>
                    <el-input size="small" style="width:200px;" v-model.trim="filters.branchCode" placeholder="请输入机构代码"></el-input>
                </el-form-item> -->
                <el-form-item>
                    <el-select size="small" clearable style="width:200px;" v-model="filters.branchCode" placeholder="请选择选择机构">
                        <!-- <el-option  label="全部机构"  value="-1"  ></el-option> -->
                        <el-option v-for="(item,index) in filters.items" :key="index" :label="item.codeCname" :value="item.code"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-tooltip class="item" effect="dark" content="发放时间" placement="top">
                        <el-date-picker size="small" style="width:200px;" v-model.trim="filters.Time" type="daterange" align="left" placeholder="请选择交易起止时间范围">
                        </el-date-picker>
                    </el-tooltip>
                </el-form-item>

                <el-form-item style="float:right;">
                    <el-button size="small" type="primary" icon="upload2" @click="exportExcels" v-show="quickExport">导出</el-button>
                </el-form-item>
                <el-form-item style="float:right;">
                    <el-button size="small" type="primary" icon="search" v-on:click="getLogs(true)" v-show="quickQuery">查询</el-button>
                </el-form-item>
            </el-form>
        </el-col>
        <!--列表-->
        <el-table :data="Logs" stripe border :height="this.winHeight-188" highlight-current-row v-loading="listLoading" @selection-change="selsChange" style="width: 100%;">
            <!-- <el-table-column prop="id" align="center" label="ID" min-width="50" show-overflow-tooltip>
      </el-table-column> -->
            <el-table-column prop="cardHolderName" align="center" label="持卡人姓名" min-width="120" show-overflow-tooltip>
            </el-table-column>
            <el-table-column prop="cardHolderId" align="center" label="持卡人身份证号" width="140">
            </el-table-column>
            <el-table-column prop="phoneNO" align="center" label="手机号" min-width="130" show-overflow-tooltip>
            </el-table-column>
            <el-table-column prop="externalRefNumber" align="center" label="保单号" width="120">
            </el-table-column>
            <el-table-column prop="amount" align="center" label="保单金额" width="100" show-overflow-tooltip>
            </el-table-column>
            <el-table-column prop="bankName" align="center" label="银行" min-width="140" show-overflow-tooltip>
            </el-table-column>
            <el-table-column prop="merchantId" align="center" label="商户号" width="120" show-overflow-tooltip>
            </el-table-column>
            <el-table-column prop="entryChannel" align="center" label="订单来源渠道" min-width="130" show-overflow-tooltip :formatter="formatEntryChannel">
            </el-table-column>
            <el-table-column prop="mainStatus" align="center" label="主状态" width="130" show-overflow-tooltip :formatter="formatMainStatus">
            </el-table-column>
            <!-- <el-table-column prop="mamMenbercode" align="center" label="中奖号" min-width="140" show-overflow-tooltip>
            </el-table-column> -->
            <el-table-column prop="openBankName" align="center" label="所属银行" width="100">
            </el-table-column>
            <el-table-column prop="openCardCity" align="center" label="开户所属市" width="110">
            </el-table-column>
            <!-- <el-table-column prop="openCardProvince" align="center" label="开户所属省份" min-width="130" show-overflow-tooltip>
            </el-table-column> -->
            <el-table-column prop="orderType" align="center" label="订单类型" width="100" show-overflow-tooltip :formatter="formatOrderType">
            </el-table-column>
            <el-table-column prop="pointAmt" align="center" label="权益金额" width="100" show-overflow-tooltip>
            </el-table-column>
            <el-table-column prop="subStatus" align="center" label="子状态" min-width="130" show-overflow-tooltip :formatter="formatSubStatus">
            </el-table-column>
            <!-- <el-table-column prop="voucherNo" align="center" label="备注" width="100" show-overflow-tooltip>
            </el-table-column> -->
            <el-table-column label="操作" fixed='right' width="100">
                <template scope="scope">
                    <el-button size="small" @click="handleDetail(scope.$index, scope.row)">详情</el-button>
                    <!-- <el-button type="danger" size="small" @click="handleDel(scope.$index, scope.row)">删除</el-button> -->
                </template>
            </el-table-column>
        </el-table>
        <!--工具条-->
        <el-col :span="24" class="toolbar">
            <!-- <el-button type="danger" @click="batchRemove" :disabled="this.sels.length===0">批量删除</el-button> -->

            <el-pagination style="float:right" @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="page" :page-sizes="[10, 20, 40, 80]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper">
                <!-- :total="total" -->
            </el-pagination>
        </el-col>
        <!--详情界面-->
        <el-dialog title="详情" size="small" v-model="detailFormVisible" :close-on-click-modal="false">
            <el-form :model="detailForm" label-width="120px" ref="detailForm">
                <el-row>
                    <el-col :xs="24" :sm="20" :md="16" :lg="11">
                        <el-form-item label="持卡人姓名:" prop="cardHolderName">
                            <el-input v-model="detailForm.cardHolderName" :readonly="true" auto-complete="off"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="20" :md="16" :lg="11">
                        <el-form-item label="持卡人身份证号:" prop="cardHolderId">
                            <el-input v-model="detailForm.cardHolderId" :readonly='true' auto-complete="off"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :xs="24" :sm="20" :md="16" :lg="11">
                        <el-form-item label="商户号:" prop="merchantId">
                            <el-input v-model="detailForm.merchantId" :readonly='true' auto-complete="off"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="20" :md="16" :lg="11">
                        <el-form-item label="手机号:" prop="phoneNO">
                            <el-input v-model="detailForm.phoneNO" :readonly='true' auto-complete="off"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :xs="24" :sm="20" :md="16" :lg="11">
                        <el-form-item label="保单号:" prop="externalRefNumber">
                            <el-input v-model="detailForm.externalRefNumber" :readonly="true" auto-complete="off"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="20" :md="16" :lg="11">
                        <el-form-item label="保单金额:" prop="amount">
                            <el-input v-model="detailForm.amount" :readonly="true" auto-complete="off"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :xs="24" :sm="20" :md="16" :lg="11">
                        <el-form-item label="权益金额:" prop="pointAmt">
                            <el-input v-model="detailForm.pointAmt" :readonly='true' auto-complete="off"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="20" :md="16" :lg="11">
                        <el-form-item label="订单来源渠道:" prop="entryChannel">
                            <el-input v-model="detailForm.entryChannel" :readonly='true' auto-complete="off"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :xs="24" :sm="20" :md="16" :lg="11">
                        <el-form-item label="订单类型:" prop="orderType">
                            <el-input v-model="detailForm.orderType" :readonly='true' auto-complete="off"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="20" :md="16" :lg="11">
                        <el-form-item label="银行:" prop="bankName">
                            <el-input v-model="detailForm.bankName" :readonly='true' auto-complete="off"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :xs="24" :sm="20" :md="16" :lg="11">
                        <el-form-item label="所属银行:" prop="openBankName">
                            <el-input v-model="detailForm.openBankName" :readonly='true' auto-complete="off"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="20" :md="16" :lg="11">
                        <el-form-item label="开户所属省份:" prop="openCardProvince">
                            <el-input v-model="detailForm.openCardProvince" :readonly='true' auto-complete="off"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :xs="24" :sm="20" :md="16" :lg="11">
                        <el-form-item label="开户所属城市:" prop="openCardCity">
                            <el-input v-model="detailForm.openCardCity" :readonly='true' auto-complete="off"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :xs="24" :sm="20" :md="16" :lg="11">
                        <el-form-item label="主状态:" prop="mainStatus">
                            <el-input v-model="detailForm.mainStatus" :readonly='true' auto-complete="off"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :xs="24" :sm="20" :md="16" :lg="11">
                        <el-form-item label="子状态:" prop="subStatus">
                            <el-input v-model="detailForm.subStatus" :readonly='true' auto-complete="off"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click.native="detailFormVisible = false">取消</el-button>
                <!-- <el-button type="primary" @click.native="addSubmit" :loading="addLoading">提交</el-button> -->
            </div>
        </el-dialog>
    </section>
</template>

<script>
import util from '../../common/js/util'

import commons from '../../common/js/common'
//import NProgress from 'nprogress'
import { mapState, mapActions } from 'vuex'
import { queryCnp } from '../../api/api';

export default {
    data() {
        return {
            filters: {
                Time: '',
                businessNo: '',
                branchCode: '',
                items: ''
            },
            items: [],
            Logs: [],
            lists: [],
            exportTotal: 0,
            total: 0,
            page: 1,
            pageSize: 10,
            loading: '',
            // fullscreenLoading:false,
            listLoading: false,
            addLoading: false,
            addFormVisible: false,
            detailFormVisible: false,
            quickExport: false,
            quickQuery: false,

            detailForm: {},
            sels: [],//列表选中列
            userid: '',
            addFormRules: {

            },
            IsShow: false
        }
    },
    computed: mapState({
        blist: 'branchCodelist',
        winWidth: 'winWidth',
        winHeight: 'winHeight'
    }),
    methods: {
        cellStyle(row, rowIndex, columnIndex) {
        },
        formatSubStatus: function (row, column) {
            if (row.subStatus == '0000') {
                return '初始化';
            }
            if (row.subStatus == '0030') {
                return '会员创建成功';
            }
            if (row.subStatus == '0031') {
                return '会员创建失败';
            }
            if (row.subStatus == '0040') {
                return '权益申请成功';
            }
            if (row.subStatus == '0041') {
                return '权益申请失败';
            }
            if (row.subStatus == '0050') {
                return '权益核销成功';
            }
            if (row.subStatus == '0051') {
                return '权益核销失败';
            }
            if (row.subStatus == '0010fo') {
                return '出款成功';
            }
            if (row.subStatus == '0011fo') {
                return '出款失败';
            }
            if (row.subStatus == '0070') {
                return '权益撤销核销成功';
            }
            if (row.subStatus == '0071') {
                return '撤销失败';
            }
            if (row.subStatus == '0080') {
                return '出款超时重新申请权益成功';
            }
            if (row.subStatus == '0081') {
                return '重新领券失败';
            }
            if (row.subStatus == '0082') {
                return '重新核券成功';
            }
            if (row.subStatus == '0083') {
                return '重新核券失败 ';
            }

        },
        formatMainStatus: function (row, column) {
            return row.mainStatus == 's' ? '成功' : (row.mainStatus == 'p' ? '处理中' : (row.mainStatus == 'F' ? '失败' : '冲正'));
        },
        formatOrderType: function (row, column) {
            return row.orderType == '01' ? '合并支付' : (row.orderType == '02' ? '权益支付' : (row.orderType == '03' ? '后返现金立返' : (row.orderType == '04' ? '后返现金后返' : '后返实物 ')));
        },
        formatEntryChannel: function (row, column) {
            return row.entryChannel == '01' ? 'pos' : (row.entryChannel == '02' ? 'mgw' : (row.entryChannel == '03' ? 'fi' : 'oqs'));
        },
        formatTime: function (row, column) {
            return commons.getDaytime(row.createTime, 1, false);
        },
        handleCurrentChange(val) {
            this.page = val;
            this.getLogs(true);
        },
        handleSizeChange(val) {
            this.pageSize = val;
            this.getLogs(true);
        },
        //获取列表
        getLogs(bool) {
            let para = new FormData();
            para.append("pageSize", this.pageSize);
            para.append("pageNumber", this.page);
            // para.append("pageSize", bool ? this.pageSize : this.exportTotal);
            // para.append("pageNumber", bool ? this.page : 1);
            para.append("startDate", commons.changeDates(this.filters.Time, 'start'));
            para.append("endDate", commons.changeDates(this.filters.Time, 'end'));
            para.append("branchCode", this.filters.branchCode);
            para.append("businessNo", this.filters.businessNo);
            this.listLoading = bool;
            // this.fullscreenLoading = bool?false:true;
            if (!bool) {
                this.loading = this.$loading({
                    lock: true,
                    text: '正在导出',
                    spinner: 'el-icon-loading',
                    background: 'rgba(0, 0, 0, 0.7)'
                });
            }
            //  else {
            //     this.filters.items = this.blist.result;
            // }
            queryCnp(para).then((res) => {
                this.lists = res.data.result.withPayOrderListContent.withPayOrder;
                // this.total = parseInt(res.data.result.txnTotal);
                // this.exportTotal = parseInt(res.data.result.txnTotal);
                this.listLoading = false;
                if (!bool) {
                    this.loading.close();
                    this.export2Excel();
                }
                else {
                    this.Logs = res.data.result.withPayOrderListContent.withPayOrder;

                }
            });
        },
        // 详情界面
        handleDetail: function (index, row) {
            this.detailForm = Object.assign({}, row);
            this.detailFormVisible = true;
            this.detailForm.mainStatus = this.formatMainStatus(row, index);
            this.detailForm.subStatus = this.formatSubStatus(row, index);
            this.detailForm.entryChannel = this.formatEntryChannel(row, index);
            this.detailForm.orderType = this.formatOrderType(row, index);
        },
        //table导出excels
        exportExcels: function () {
            if (this.filters.Time == "") {
                this.$message({
                    message: '请输入查询条件',
                    type: 'success'
                });
            } else {
                this.getLogs(false);
            }
        },
        export2Excel: function () {
            require.ensure([], () => {
                const { export_json_to_excel } = require('../../vendor/Export2Excel');
                const tHeader = ['保单金额', '银行', '持卡人姓名', '持卡人身份证号', '订单来源渠道', '保单号', '主状态', '子状态', '商户号', '所属银行', '开户所属市', '开户所属省份', '订单类型', '手机号', '权益金额'];
                const filterVal = ['amount', 'bankName', 'cardHolderName', 'cardHolderId', 'entryChannel', 'externalRefNumber', 'mainStatus', 'subStatus', 'merchantId', 'openBankName', 'openCardCity', 'openCardProvince', 'oderType', 'phoneNO', 'pointAmt'];
                const list = this.lists;
                for (var i in list) {
                    list[i].subStatus = list[i].subStatus == '0000' ? '初始化' : (list[i].subStatus == '0030' ? '会员创建成功' : (list[i].subStatus == '0031' ? '会员创建失败' : (list[i].subStatus == '0040' ? '权益申请成功' : (list[i].subStatus == '0041' ? '权益申请失败' : (list[i].subStatus == '0050' ? '权益核销成功' : (list[i].subStatus == '0051' ? '权益核销失败' : (list[i].subStatus == '0010fo' ? '出款成功' : (list[i].subStatus == '0011fo' ? '出款失败' : (list[i].subStatus == '0070' ? '权益撤销核销成功' : (list[i].subStatus == '0071' ? '撤销失败' : (list[i].subStatus == '0080' ? '出款超时重新申请权益成功' : (list[i].subStatus == '0081' ? '重新领券失败' : (list[i].subStatus == '0082' ? '重新核券成功' : '重新核券失败')))))))))))));
                    list[i].mainStatus = list[i].mainStatus == 's' ? '成功' : (list[i].mainStatus == 'p' ? '处理中' : (list[i].mainStatus == 'F' ? '失败' : '冲正'));
                    list[i].orderType = list[i].orderType == '01' ? '合并支付' : (list[i].orderType == '02' ? '权益支付' : (list[i].orderType == '03' ? '后返现金立返' : (list[i].orderType == '04' ? '后返现金后返' : '后返实物 ')));
                    list[i].entryChannel = list[i].entryChannel == '01' ? 'pos' : (list[i].entryChannel == '02' ? 'mgw' : (list[i].entryChannel == '03' ? 'fi' : 'oqs'));
                }
                const data = this.formatJson(filterVal, list);
                export_json_to_excel(tHeader, data, '快钱记录列表');
            })
        },
        formatJson: function (filterVal, jsonData) {
            return jsonData.map(v => filterVal.map(j => v[j]));
        },
        selsChange: function (sels) {
            this.sels = sels;
        },
        btnShow: function () {
            let thisData = JSON.parse(sessionStorage.getItem('179'));
            let _this = this;
            $.each(thisData, function (i, j) {
                if (thisData[i] == "quickExport") {
                    _this.quickExport = true;
                }
                if (thisData[i] == "quickQuery") {
                    _this.quickQuery = true;
                }
            });
        },
    },
    mounted() {
        this.btnShow();
        this.filters.items = this.blist.result;
    }
}

</script>

<style scoped>

</style>